<style type="text/css">
    input.attr{
        width: 100px;
        margin: 0;
    }
    input.attr-value{
        width: 100px;
        margin: 0;
    }
    .disabled{
        opacity: 0.3;
    }
    .dd{
        width: 100%;
    }
    .dd-foot{
        -moz-box-sizing: border-box;
        border: none;
        vertical-align: top;
        padding: 15px;
        margin: 0;
        border-radius: 0;
        border-width:0 1px 1px 1px;
        border-style:solid;
        float: none;
        border-color:#E8EDF1;
    }
    .dd-caption{
        border-radius: 0;
        overflow: hidden;
        display: table-row;
    }
    .dd-caption div, .dd-foot div{
        font-weight: bold;
        display: table-cell;
        margin: 0;
        padding: 15px;
    }
    .dd-caption div{
        background-color: #ECF0F2;
    }
    .dd-item{
        border-radius: 0;
        border-top: 1px solid #E8EDF1;
        overflow: hidden;
        display: table-row;
    }
    .dd-list{
        border-radius: 0;
        border-width:0 1px 0 1px;
        border-style:solid;
        border-color:#E8EDF1;
        display: table;
        width: 100%;
    }
    .dd-attr, .dd-attr-value, .dd-tool, .dd-handle-bar, .dd-edit{
        -moz-box-sizing: border-box;
        display: table-cell;
        border: none;
        vertical-align: top;
        padding: 15px;
        margin: 0;
        border-radius: 0;
        border-width:0 1px 1px 0;
        border-style:solid;
        float: none;
        border-color:#E8EDF1;
    }
    .dd-handle-bar{
        width: 80px;
    }
    .dd-edit{
        width: 90px;
    }
    .dd-tool{
        width: 140px;
    }

    .dd-handle-bar{
        cursor: pointer;
    }

    .attr-value{
        width: 80px;
        margin: 0 10px 5px;
        background-color: #FFFFFF;
        border: 1px solid #E5E9EC;
        border-radius: 2px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 13px;
        font-weight: normal;
        height: 35px;
        padding: 6px 9px !important;
        transition: background 0.2s linear 0s, box-shadow 0.2s linear 0s;
        vertical-align: middle;
        text-align: center;
        float: left;
    }
</style>

<br>
<br>
<br>
<div class="row">
    <div class="col-xs-12 col-md-12">
        <div class="grid simple">
            <div class="grid-body no-border">
                <div class="row">
                    <div class="row form-row">
                        <div class="col-xs-4 col-md-4">
                            <h3><span class="semi-bold"><?= $attr_group['name'] ?></span></h3>
                            <br>
                        </div> 
                    </div>

                    <div class="row form-row">
                        <div class="col-xs-12 col-md-12">
                            <div class="dd" id="nestable-attr">
                                <ol class="dd-list">
                                    <li class="dd-caption">
                                        <div>
                                            属性名
                                        </div>
                                        <div>
                                            属性值
                                        </div>
                                        <div>
                                            排序
                                        </div>
                                        <div>
                                            编辑
                                        </div>
                                        <div>
                                            操作
                                        </div>
                                    </li>
                                    <? if($attr_group['children']): ?>
                                    <? foreach($attr_group['children'] as $a): ?>
                                        <? $disabled = $a['status'] == ATTR_STATUS_ON ? FALSE : TRUE ?>
                                        <li data-id="<?= $a['attr_id'] ?>" class="dd-item">
                                                <div class="dd-attr">
                                                        <input type="text" class="attr smart-input <?= $disabled ? 'disabled' : '' ?>" value="<?= $a['name'] ?>" attrid="<?= $a['attr_id'] ?>" oldvalue="<?= $a['name'] ?>" <?= $disabled ? 'disabled="disabled"' : '' ?> />
                                                </div>
                                                <div class="dd-attr-value">
                                                    <? if($a['children']): ?>
                                                        <? foreach($a['children'] as $av): ?>
                                                                <? $cur_disabled = $av['status'] == ATTR_VALUE_STATUS_ON ? FALSE : TRUE ?>
                                                                <div class="attr-value <?= $disabled || $cur_disabled ? 'disabled' : '' ?>">
                                                                    <?= $av['name'] ?>
                                                                </div>
                                                        <? endforeach ?>
                                                    <? endif ?> 
                                                </div>
                                                <div class="dd-handle-bar" title="按住拖动修改排序">
                                                    <span>
                                                        <i class="icon-move"></i>
                                                        拖动
                                                    </span>
                                                </div>
                                                <div class="dd-edit">
                                                    <a href="javascript:void(0)" onclick="$.Attr.edit_attr_value(<?= $a['attr_id'] ?>)" >
                                                        <i class="icon-paste"></i>  属性值
                                                    </a>
                                                </div>
                                                <div class="dd-tool">
                                                    <? if($a['status'] == ATTR_STATUS_OFF ): ?>
                                                        <a href="javascript:void(0)" onclick="$.Attr.change_attr_status(<?= $a['attr_id'] ?>, 'on')" >
                                                            <i class="icon-eye-open"></i>  显示
                                                        </a>
                                                    <? else: ?>
                                                        <a href="javascript:void(0)" onclick="$.Attr.change_attr_status(<?= $a['attr_id'] ?>, 'off')" >
                                                            <i class="icon-eye-close"></i>  隐藏
                                                        </a>
                                                    <? endif ?>
                                                    &nbsp;&nbsp;|&nbsp;&nbsp;
                                                    <a href="javascript:void(0)" onclick="$.Attr.del_attr(<?= $a['attr_id'] ?>)" >
                                                        <i class="icon-trash"></i> 删除
                                                    </a>
                                                </div>
                                        </li>
                                    <? endforeach ?>
                                    <? endif ?>
                                </ol>
                            </div>
                            <div class="clearfix"></div>
                            <div class="dd-foot">
                                <input type="text" class="attr" name="add-attr" value="" />
                                <a href="javascript:void(0)" class="btn btn-primary" onclick="$.Attr.add_attr('<?= $attr_group['attr_group_id']?>', this);">
                                    <i class="icon-plus-sign"></i>
                                    新增属性
                                </a>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#nestable-attr').nestable({
            maxDepth: 1,
            handleClass: 'dd-handle-bar',
        });
        var sort_tmp = $.Attr.get_sort_str();
        $('#nestable-attr').on('change', function(){

            if( $.Attr.get_sort_str() !== sort_tmp )
            {
                var url  = $.G.domain+"attr/edit_attr_sort_batch";
                var data = $.toJSON($(this).nestable('serialize'));
                var data = {'is_ajax':1, 'data': data};

                response = $.Attr.call(url, data, 'get');
                if( response.status == false )
                {
                    $.T.alert(response.msg);
                }

                $.T.refresh();
            }
            
            return;
        });

        $(".smart-input").live("focusout",function(){
            var target   = $(this);
            var id       = target.attr('attrid');
            var value    = target.val();
            var oldvalue = target.attr('oldvalue');
            if( $.T.empty(value) )
            {
                $.T.alert("属性值名称不能为空。");
                target
                    .val(oldvalue);
            }

            if( value === oldvalue ) 
                return;

            // 锁定输入框
            target.attr('disable', true);

            // 编辑模式
            var url      = $.G.domain+"attr/edit_attr/"+id;
            var data     = {'is_ajax': 1, 'name': value};
            var response = $.Attr.call(url, data, 'post');
            if( ! response )
            {
                $.T.alert("无法访问服务器");
            }
            else if( response.status == false )
            {
                target
                    .val(oldvalue);
                $.T.alert(response.msg, function(){
                    setTimeout(target.focus(), 0);
                });
            }
            else
            {
                target
                .attr('attrid', response.data)
                .attr('oldvalue', value);
            }
            target.attr('disable', false);
            return;
        });

    });

    $.Attr = {
        get_sort_str: function()
        {
            var str = '';
            $.each($('.dd-list .dd-item'), function(i, n){
                str += $(this).attr('data-id')+'-';
            });
            return str;
        },

        add_attr: function(id, obj)
        {
            var id     = id;
            var target = $(obj);
            if( $.T.empty(id) || $.T.empty(target) )
            {
                $.T.alert("缺少必要参数。");
                return;
            }

            var value  = $('input[name="add-attr"]');
            if( $.T.empty(value.val()) )
            {
                $.T.alert("属性名称不能为空。", function(){
                    value.focus();
                });
                return;
            }

            var url    = $.G.domain+"attr/add_attr/";
            var data   = {'is_ajax': 1, 'id': id, 'name': value.val() };

            target.attr('disable', true);
            var response = $.Attr.call(url, data, 'get');
            if( ! response )
            {
                $.T.alert("无法访问服务器。");
            }
            else if( response.status == false )
            {
                target
                    .val('');
                $.T.alert(response.msg);
            }
            else
            {
                $.T.refresh();
            }

            target.attr('disable', false);
            return;
        },

        del_attr: function(id)
        {
            $.T.confirm("确认要删除该属性吗？所包含的属性值也将一起被删除。", function(){
                url  = $.G.domain+"attr/del_attr";
                data = {'is_ajax': 1, 'id': id};
                response = $.Attr.call(url, data, 'get');
                if( ! response )
                {
                    $.T.alert("无法访问服务器");
                }
                else if( response.status == false )
                {
                    $.T.alert(response.msg);
                }
                else
                {
                    $.T.refresh();
                }
            })
        },

        edit_attr_value: function(id)
        {
            var opt = {width: 800,height:600, lock: true, opacity: 0.75, title: '<h3>编辑 <span class="semi-bold">属性值</span></h3>', close: function(){$.T.refresh()}}; 
            $.dialog.open($.G.domain+'attr/edit_attr_value/'+id, opt, function(){$.T.refresh()})
        },

        /**
         * [改变状态]
         */
        change_attr_status: function(id, act)
        {
            url  = $.G.domain+"attr/change_attr_status";
            data = {'is_ajax': 1, 'id': id, 'act':act};
            response = $.Attr.call(url, data, 'get');
            if( ! response )
            {
                $.T.alert("无法访问服务器");
            }
            else if( response.status == false )
            {
                $.T.alert(response.msg);
            }
            else
            {
                $.T.refresh();
            }
        },

        call: function(url, data, type)
        {
            var output;
            $.ajax({
                url     : url,
                dataType: 'json',
                data    : data,
                type    : type,
                async   : false,
                success: function(response)
                {
                    output = response;
                }
            });
            return output;
        }
    }
</script>
